<template>
  <div class="reg" id="background">
    <form>
      <h1><img src="../img/YNUS.png"></h1>
      <p>用户注册</p>
      <p><input type="text"   placeholder="请输入用户名" v-model="user.username"></p>
      <p><input type="text"  placeholder="请输入密码" v-model="user.password"></p>
      <p><input type="text"  placeholder="请确认密码" v-model="verify"></p>
      <p><input type="button"  value="注册" @click="getRegister"></p>
      <p class="txt"><a href="login">已有账号登录</a></p>
    </form>
  </div>
</template>

<script>
export default {
  name: "UserRegister",
  data(){
    return{
      user:{
        username:'',
        password:'',
      },
      verify:'',
    }
  },
  methods:{
    getRegister(){
      if(this.verify==this.user.password)
      {
        this.$http({
          method: "POST",
          data: this.user,
          url: 'http://localhost:84/user/register',}).then((res)=>{
          if (!res.data.flag) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
            const TIME_COUNT = 3;
            var count = TIME_COUNT;
            if(!this.timer){
              this.timer = setInterval(()=>{
                if(count > 0 && count <= TIME_COUNT){
                  count--;
                }else{
                  clearInterval(this.timer);
                  this.timer = null;
                  this.$router.push({name:'UserLogin'});
                }
              },1000)
            }

          }
        },(err)=>{
          console.log('err',err);
        });
      }
      else {
        this.$message.error("两次密码输入不一致")
      }

    },

  }

}
</script>

<style scoped>
@import "../css/login.css";
#background{
  width: 100%;
  height: 100%;
  background: url("../img/19.jpg");
  background-size:100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>